<template>
  <div class="search">
    <!-- 搜索栏 -->
    <div class="searchHead" v-if="hotSearchList">
      <i class="iconfont icon-return" @click="$router.go(-1)"></i>
      <div class="input">
        <input type="text" :placeholder="hotSearchList[0].first" v-model="keywordSearch" />
        <span v-if="keywordSearch" @click="cloneSearch">×</span>
      </div>

      <i class="iconfont icon-yonghu"></i>
    </div>
    <!-- 搜索栏 end-->
    <!-- 搜索建议 -->
    <div class="proposalSearch" v-show="isShowProposal">
      <ul v-if="proposalList">
        <li class="firstItem">
          搜索
          <span>"{{keywordSearch}}"</span>
        </li>
        <template v-for="val in proposalList.artists">
          <li class="orderItem" :key="val.id" @click.stop="goSearchResult(val.name)">
            <i class="iconfont icon-sousuo"></i>
            <span>{{val.name}}</span>
          </li>
        </template>
        <template v-for="val in proposalList.songs">
          <li class="orderItem" :key="val.id" @click.stop="goSearchResult(val.name)">
            <i class="iconfont icon-sousuo"></i>
            <span>{{val.name}}</span>
          </li>
        </template>
        <template v-for="val in proposalList.albums">
          <li class="orderItem" :key="val.id" @click.stop="goSearchResult(val.name)">
            <i class="iconfont icon-sousuo"></i>
            <span>{{val.name}}</span>
          </li>
        </template>
        <template v-for="val in proposalList.playlists">
          <li class="orderItem" :key="val.id" @click.stop="goSearchResult(val.name)">
            <i class="iconfont icon-sousuo"></i>
            <span>{{val.name}}</span>
          </li>
        </template>
      </ul>
    </div>
    <!-- 搜索建议 -->
    <!-- 历史记录 -->
    <div class="historical" v-show="isShowSearch" v-if="hotSearchList">
      <template v-if="historicalList.length>0">
        <div class="historicalTitle">
          <span>历史记录</span>
          <i class="iconfont icon-lajitongshanchu" @click.stop="dialogVisible = true"></i>
        </div>
        <div class="historicalContent">
          <template v-for="(item,idx) in historicalList">
            <span :key="idx" @click="goSinger(item.name)">{{item.name}}</span>
          </template>
        </div>
      </template>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="90%">
      <span>确定清空全部历史记录？</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
        <el-button type="danger" @click="delHistorical">清 空</el-button>
      </span>
    </el-dialog>
    <!-- 历史记录 end-->
    <!-- <hotsearch :hotSearchList="hotSearchList" v-show="isShowSearch"></hotsearch> -->
    <!-- 热搜榜 -->
    <div class="hotSearch" v-if="hotSearchList" v-show="isShowSearch">
      <div class="hotTitle">
        <span>热搜榜</span>
      </div>
      <ul class="hotList">
        <template v-for="(item,index) in hotSearchList">
          <li :key="index" @click="goHotSinger(item.first)">
            <div class="listNumber" :class="{'colorActive':index<3}">{{index+1}}</div>
            <p class="songName" :class="{'fontActive':index<3}">{{item.first}}</p>
          </li>
        </template>
      </ul>
    </div>
    <!-- 热搜榜 end-->
    <!-- 搜索结果 -->
    <div class="searchResult" v-if="!isShowSearch">
      <searchresult :singerName="singerName" v-if="singerName"></searchresult>
    </div>
    <!-- 搜索结果 end-->
  </div>
</template>

<script>
import hotsearch from "./children/hotSearch.vue";
import searchresult from "./children/searchResult.vue";

export default {
  name: "search",
  components: { hotsearch, searchresult },
  props: {},
  data() {
    return {
      keywordSearch: "",
      hotSearchList: "", // 热搜列表
      proposalList: "", // 搜索建议
      isShowProposal: false, // 判断搜索建议
      isShowSearch: true, // 判断搜索结果
      historicalList: JSON.parse(localStorage.getItem("historica"))
        ? JSON.parse(localStorage.getItem("historica"))
        : [], // 历史记录
      dialogVisible: false, // 对话框
      searchresultList: "", // 综合数据
      singerName: "" // 歌手的名字
    };
  },
  watch: {
    keywordSearch: function() {
      console.log(this.keywordSearch);
      this.isShowProposal = true;
      // 搜索建议
      if (this.keywordSearch) {
        this.$http("/search/suggest", {
          params: {
            keywords: this.keywordSearch,
            type: "mobile"
          }
        }).then(res => {
          console.log(res);
          this.proposalList = res.data.result;
          console.log(this.proposalList);
        });
      } else {
        this.proposalList = "";
      }
    }
  },
  computed: {},
  methods: {
    // 热搜榜
    getHotSearch() {
      this.$http("/search/hot/detail").then(res => {
        console.log(res);
        this.hotSearchList = res.data.result.hots;
        console.log(this.hotSearchList);
      });
    },
    // 点击热搜榜
    goHotSinger(name) {
      console.log(name);

      this.singerName = name;
      this.isShowSearch = false;
      // this.historicalList.push({ name });
      // localStorage.setItem("historica", JSON.stringify(this.historicalList));
      if (this.historicalList.length == 0) {
        this.historicalList.push({ name });
        localStorage.setItem("historica", JSON.stringify(this.historicalList));
      } else {
        let isTtue = this.historicalList.some(val => {
          return val.name == name;
        });
        // console.log(isTtue);
        if (isTtue) {
          console.log("相同");
          return;
        } else {
          this.historicalList.push({ name });
          localStorage.setItem(
            "historica",
            JSON.stringify(this.historicalList)
          );
        }
      }
      // this.keywordSearch = name;
    },
    // 删除搜索栏文字
    cloneSearch() {
      this.keywordSearch = "";
    },
    // 点击跳到搜索结果页面
    goSearchResult(name) {
      this.singerName = name;
      
      console.log(this.singerName)
      // localStorage.setItem('singerName',this.singerName);
      // 搜索请求
      this.$http("/search", {
        params: {
          keywords: name,
          type: 1018
        }
      }).then(res => {
        this.isShowSearch = false;
        this.isShowProposal = false;

        // console.log(res);
        // this.searchresultList = res.data.result;
        // console.log(this.searchresultList);

        // 添加到历史记录
        if (this.historicalList.length == 0) {
          this.historicalList.push({ name });
          localStorage.setItem(
            "historica",
            JSON.stringify(this.historicalList)
          );
        } else {
          let isTtue = this.historicalList.some(val => {
            return val.name == name;
          });
          // console.log(isTtue);
          if (isTtue) {
            console.log("相同");
            return;
          } else {
            this.historicalList.push({ name });
            localStorage.setItem(
              "historica",
              JSON.stringify(this.historicalList)
            );
          }
        }

        // console.log(this.historicalList);
      });
      this.keywordSearch = name;
    },
    // 删除历史记录
    delHistorical() {
      console.log("已清空");
      localStorage.removeItem("historica");
      this.historicalList = [];
      this.dialogVisible = false;
    },
    // 点击历史记录跳转
    goSinger(name) {
      this.keywordSearch = name;
      this.singerName = name;
      console.log(name);
      this.$http("/search", {
        params: {
          keywords: name,
          type: 1018
        }
      }).then(res => {
        this.isShowSearch = false;
        this.isShowProposal = false;
        console.log(res);
        this.searchresultList = res.data.result;
        if (this.historicalList.length == 0) {
          this.historicalList.push({ name });
          localStorage.setItem(
            "historica",
            JSON.stringify(this.historicalList)
          );
        } else {
          let isTtue = this.historicalList.some(val => {
            return val.name == name;
          });
          // console.log(isTtue);
          if (isTtue) {
            console.log("相同");
            return;
          } else {
            this.historicalList.push({ name });
            localStorage.setItem(
              "historica",
              JSON.stringify(this.historicalList)
            );
          }
        }
      });


    }
  },
  created() {
    this.getHotSearch();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/common.scss";
.search {
  .searchHead {
    width: 100%;
    height: vw(50);
    overflow: hidden;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: vw(10);
    i {
      font-size: vw(30);
    }
    .input {
      width: vw(260);
      border-bottom: vw(1) solid #333;
      display: flex;
      justify-content: space-between;
      align-items: center;
      input {
        width: 90%;
        outline: none;
        border: none;
        padding: vw(4) 0;
        font-size: vw(16);
      }
      span {
        font-size: vw(22);
      }
    }
  }
  .proposalSearch {
    position: absolute;
    top: vw(50);
    left: vw(10);
    background: #fff;
    width: 90%;
    border: vw(1) solid #ccc;
    ul {
      width: 100%;
      // padding: 0  vw(20);
      .firstItem {
        padding: vw(10) vw(20);
        border-bottom: vw(1) solid #ccc;
        font-size: vw(16);
        color: rgb(87, 130, 178);
      }
      .orderItem {
        padding: vw(10) vw(20);
        border-bottom: vw(1) solid #ccc;
        i {
          font-size: vw(20);
          padding-right: vw(10);
          color: #000;
        }
        span {
          font-size: vw(16);
        }
      }
    }
  }
  .historical {
    width: 100%;
    padding: vw(10);
    .historicalTitle {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        font-size: vw(14);
        font-weight: bold;
      }
      i {
        font-size: vw(16);
      }
    }
    .historicalContent {
      padding: vw(10) 0;
      white-space: nowrap;
      overflow-x: scroll;
      span {
        display: inline-block;
        padding: vw(3) vw(12);
        margin: vw(4) vw(5);
        line-height: vw(20);
        font-size: vw(14);
        background: #cecece;
        border-radius: vw(20);
      }
    }
  }
  .hotSearch {
    width: 100%;
    padding: vw(10);
    .hotTitle {
      // line-height: vw(26);
      font-size: vw(16);
      font-weight: bold;
      color: #000;
    }
    .hotList {
      li {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: vw(10) 0;
        .listNumber {
          width: vw(40);
          height: vw(20);
          line-height: vw(20);
          text-align: center;
          font-size: vw(20);
          color: #666;
        }
        .songName {
          font-size: vw(18);
          padding-left: vw(10);
        }
        .colorActive {
          color: red;
        }
        .fontActive {
          font-weight: bold;
        }
      }
    }
  }
}
</style>